<template>
	<view class="chenjian-body tn-padding-top tn-padding-sm">

		<view class="tn-flex tn-flex-row-center tn-margin-bottom tn-margin-top-xs tn-flex-row-between">
			<view class="justify-content-item tn-text-center" style="width:320rpx">
				<text class="tn-padding-right-sm tn-text-bold" style="font-size: 36rpx;" @click="showcalFunction">{{dangqianriqi}}</text>
				<text class="tn-text-bold" style="font-size:36rpx;">{{xingqiji}}</text>
			</view>
			<view class="tn-flex tn-flex-1 tn-flex-row-around" style="font-size: 30rpx;">
				<view class="justify-content-item">
					<text @touchend="getNextDate(-1)">上一天</text>
				</view>
				<view class="justify-content-item">
					<text @touchend="getNextDate(1)">下一天</text>
				</view>
			</view>
		</view>
		<view class="info-content"  v-if="planDayRecipesDetails.length">
			<view class="tn-flex tn-flex-nowrap tn-flex-col-center table-header" style="gap: 16rpx;padding:26rpx 30rpx">
				<view class="tn-text-bold">
					餐次
				</view>
				<view class="tn-flex-2 tn-text-bold">
					菜名
				</view>
				<view class="tn-flex-2 tn-text-bold">
					成分/摄入(克)
				</view>
			</view>
			
			<view class="tn-flex tn-flex-row-center tn-flex-row-between margin-bottom-10" v-for="(item,index) in planDayRecipesDetails" :key="item.id">
				<cookBook class="tn-width-full" :hideIcon="index%2===1">
					<view class="tn-flex tn-flex-nowrap tn-flex-col-center" style="gap: 16rpx">
						<view class="tn-text-center tn-text-bold">
							{{cookbookType[item.type]}}
						</view>
						<view class=" tn-flex-2">
							<view class="tn-flex tn-flex-col-center">
								<view class="  tn-text-left tn-flex tn-flex-direction-column overflowhidden">{{item.recipeNames}} </view>
							</view>
						</view>
						<view class=" tn-flex-2">
							<view class="tn-padding-right-sm" style="width:150px">
								<view class="rec-view"> {{item.foodNames}} </view>
							</view>
						</view>
					</view>
				</cookBook>
			</view>
			<!-- <view class="border-line-view margin-bottom-10 tn-margin-top-sm"></view> -->
			<view class="tn-padding-top">
				<view class="margin-bottom-10 yingyangfenxi" style="font-size: 36rpx;">
					营养分析
				</view>
				<view style="background-color: #fff;border-radius: 16rpx; border:2rpx dashed #79CF67">
					<view class="tn-flex tn-flex-nowrap tn-flex-col-center table-header" style="gap: 16rpx;padding:26rpx 30rpx">
						<view class="tn-flex-2 tn-text-bold">
							营养
						</view>
						<view class="tn-flex-2 tn-text-bold">
							能量
						</view>
						<view class="tn-flex-2 tn-text-bold">
							蛋白质
						</view>
						<view class="tn-flex-2 tn-text-bold">
							碳水
						</view>
						<view class="tn-flex-2 tn-text-bold">
							脂肪
						</view>
					</view>
					<view class="tn-flex tn-flex-row-center tn-flex-row-between margin-bottom-10" style="padding:26rpx 30rpx" v-for="(item, index) in yinyangfenxiList" :key="index">
						<view class="tn-flex-2">
							{{item.yingyang}}
						</view>
						<view class="tn-flex-2">
							{{item.nenglaing}}
						</view>
						<view class="tn-flex-2">
							{{item.danbaizhi}}
						</view>
						<view class="tn-flex-2">
							{{item.tanshui}}
						</view>
						<view class="tn-flex-2">
							{{item.zhifang}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="tn-padding-top" style="position: relative;height:200rpx" v-else>
			 <!-- <tn-empty mode="list"></tn-empty>
			<view class="tn-text-center aaaColor">
				老师暂未发布食谱
			</view> -->
			<customEmpty empty-text="老师暂未发布食谱"></customEmpty>
		</view>
		
		<tn-calendar
		  v-if="showcalendar"
		  v-model="showcalendar"
		  mode="date"
		  :changeYear="false"
		  @change="onChange"
		></tn-calendar>
	</view>
</template>

<script>
	import cookBook from '../../components/cookbook.vue'
	import customEmpty from '../../components/customEmpty.vue'
	export default {
		name: 'youerruyuan',
		components:{cookBook,customEmpty},
		data(){
			return {
				showcalendar:false,
				dangqianriqi: '',
				datalist: [],
				xingqiji: '',
				yinyangfenxiList: [
					{yingyang: '在园实给', nenglaing:'',danbaizhi:'',tanshui:'',zhifang:''},
					{yingyang: '在园标准', nenglaing:'982.11',danbaizhi:'33.29',tanshui:'138.58',zhifang:'32.74'},
					{yingyang: '评分', nenglaing:'合格',danbaizhi:'合格',tanshui:'合格',zhifang:'合格'},
				],
				cookbookType: {
					0: '早餐',
					1: '早点',
					2: '午餐',
					3: '午点',
					4: '晚餐',
					5: '晚点'
				},
				planDayRecipesDetails: []
			}
		},
		onShow() {
			for(let i=0;i<10;i++){
				this.datalist.push({
					riqi: i+1+'号',
					tiwen: '37.5度',
					yanhou: '正常'
				})
			}
		},
		mounted() {
			
			this.getxingqi(new Date().getDay())
			this.getDay(new Date())
			this.getshipu()
		},
		methods: {
			getDay(dd){
				let y = dd.getFullYear();
			　　let m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
			　　let d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
				this.dangqianriqi = y+'-'+m+'-'+d;
			},
			onChange(event){
				console.log(event, event.date)
				this.dangqianriqi = event.date
				this.getxingqi(new Date(this.dangqianriqi).getDay())
				this.getshipu()
			},
			showcalFunction(){
				this.showcalendar = true
			},
			getClass(item, index){
				if(index % 2 == 0){
					return 'shuangshu'
				}
				return ''
			},
			getxingqi(week){
				let str = ''
				if (week == 0) {  
				        str = "星期日";  
				} else if (week == 1) {  
				        str = "星期一";  
				} else if (week == 2) {  
				        str = "星期二";  
				} else if (week == 3) {  
				        str = "星期三";  
				} else if (week == 4) {  
				        str = "星期四";  
				} else if (week == 5) {  
				        str = "星期五";  
				} else if (week == 6) {  
				        str = "星期六";  
				}
				this.xingqiji = str;
			},
			getNextDate(day) { 
				let date = this.dangqianriqi;
			　　var dd = new Date(date);
			　　dd.setDate(dd.getDate() + day);
			　　var y = dd.getFullYear();
			　　var m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
			　　var d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
			　　this.dangqianriqi = y + "-" + m + "-" + d;
			
				this.getxingqi(new Date(this.dangqianriqi).getDay())
				this.getshipu()
			},
			getPingFen(feild,value){
				const result = (feild / value)*100
				let resultStr = ''
				if(result < 80){
					resultStr = '低'
				}
				if(result > 120){
					resultStr = '高'
				}
				if(result>=80 && result<=120){
					resultStr = '合格'
				}
				return resultStr
			},
			getshipu(){
				this.planDayRecipesDetails = []
					let params = {
						Day: this.dangqianriqi
					}
					this.request({
						url: '/Recipes/DayRecipes',
						method: 'get',
						params: params,
					}).then(res => {
						if(res.code == 200){
							if(res.data){
								if(res.data.nutritionalAnalysisDto){
									this.yinyangfenxiList[0]={
										yingyang: '在园实给', 
										nenglaing:res.data.nutritionalAnalysisDto.heat,
										danbaizhi:res.data.nutritionalAnalysisDto.protein,
										tanshui:res.data.nutritionalAnalysisDto.carbohydrate,
										zhifang:res.data.nutritionalAnalysisDto.fat,
									}
									this.yinyangfenxiList[2]={
										yingyang: '评分', 
										nenglaing:this.getPingFen(res.data.nutritionalAnalysisDto.heat, 982.11),
										danbaizhi:this.getPingFen(res.data.nutritionalAnalysisDto.protein, 33.29),
										tanshui:this.getPingFen(res.data.nutritionalAnalysisDto.carbohydrate, 138.58),
										zhifang:this.getPingFen(res.data.nutritionalAnalysisDto.fat, 32.74),
									}
								}
								;(res.data.planDayRecipesDetails || []).forEach(item=>{
									const recipeNames = []
									const foodNames = []
									item.recipes.forEach(el=>{
										recipeNames.push(el.recipeName)
										el.recipesDetailsList.forEach(e=>{
											foodNames.push(e.foodName+'/'+e.weight)
										})
									})
									this.planDayRecipesDetails.push({
										type:item.type,
										recipeNames:recipeNames.join('、'),
										foodNames:foodNames.join('、')
									})
								})
								// this.planDayRecipesDetails = res.data.planDayRecipesDetails
							}
						}
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.chenjian-body{
			min-height: 100vh;
			background-color: #EEF6EE;
			overflow-y: auto;
	}
	.table-header{
		background: #79cf67;
		border-radius: 16rpx;
		color: #fff;
		margin-bottom: 10rpx;
	}
	.center-text-riqi{
		padding: 10rpx 28rpx;
		background-color: #ffffff;
	}
	.shuangshu{
		background-color: #fafafa;
	}
	.overflowhidden{
		overflow: hidden;
	}
	.margin-bottom-10{
		margin-bottom: 10rpx;
	}
	.img-view{
		width: 60%;
		margin-left: 20%;
	}
	.border-line-view{
		border-bottom: 2px dotted #aaaaaa;
	}
	.aaaColor{
		color: #aaaaaa;
	}
	.info-content{
		color: #555555;
	}
	.rec-view{
		font-size: 26rpx;
	}
	.yingyangfenxi{
		color: #444444;
		font-weight: 550;
	}
</style>